<script setup lang="ts">
import { ref } from 'vue'
import { getID, getRandom } from '@/api/game'
import type { IRomInfo } from '@/types'
import GameEmulator from './GameEmulator.vue'
import { useRoute } from 'vue-router'

/**
 * 模拟器数据
 */
const romInfo = ref<IRomInfo>({} as IRomInfo)

/**
 * 获取路由参数
 */
const fetchId = async () => {
  const route = useRoute()
  try {
    await getID(route.query.id as string).then((response) => {
      const resp = response.data
      if (resp.code === 200) {
        romInfo.value = resp.rom
        console.log(romInfo.value)
      }
    })
  } catch (error) {
    console.log(error)
  }
}
fetchId()

/**
 * 随机推荐
 */
let recommendList = ref<IRomInfo[]>([])
async function fetchRecommend() {
  try {
    const response = await getRandom(10)
    recommendList.value = response.data.result
    // romInfo.value = recommendList.value[0]
  } catch (error) {
    console.log(error)
  }
}
fetchRecommend()

/**
 * 游戏链接点击事件 => 模拟器数据更新
 */
const recommendClick = (item: IRomInfo) => {
  romInfo.value = item
}
</script>

<template>
  <div class="play-body">
    <el-row justify="space-around">
      <el-col :span="11">
        <h2>{{ romInfo.title }}</h2>
        <GameEmulator :rom-info="romInfo" />
      </el-col>
      <el-col :span="6">
        <!-- 随机推荐 -->
        <el-row justify="space-between" style="margin-top: 60px">
          <el-button @click="fetchRecommend" class="recommend-title"
            >游戏推荐<el-icon><RefreshRight /></el-icon
          ></el-button>
          <el-button @click="$router.push('/gamelist')" round>
            更多<el-icon><ArrowRight /></el-icon
          ></el-button>
        </el-row>
        <el-row v-for="item in recommendList" :key="item.id">
          <el-link
            @click="recommendClick(item)"
            style="margin-top: 20px"
            :item="item"
            :underline="false"
          >
            {{ item.title }}
          </el-link>
        </el-row>
      </el-col>
    </el-row>
  </div>
</template>

<style scoped>
.play-body {
  width: 1200px;
  margin: 0 auto;
  padding: 0 40px;
}
.recommend-title {
  padding: 20px 0;
  font-size: 20px;
  color: #4d4d4d;
  border: none;
}
</style>
